
<div class="modal-header">
    <div class="modal-title">

        <span *ngIf="color.id">编辑水质类别颜色</span>
        <span *ngIf="!color.id">创建水质类别颜色</span>
    </div>
</div>

<form nz-form #createOrEditModal="ngForm" role="form" novalidate class="form-validation" 
(submit)="save()">


<!--
    <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
            <label for="name" nz-form-item-required>类别名称</label>
        </div>
        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24">
            <nz-input name="name" [(ngModel)]="color.name" required maxlength="64">
            </nz-input>
        </div>
    </div>

    <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
            <label for="value" nz-form-item-required>类别数值</label>
        </div>
        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24">
                <nz-input-number  name="value" [nzMin]="1" [nzMax]="6" [(ngModel)]="color.value"></nz-input-number>
        </div>
    </div>
-->

     <!-- 
    <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                <label for="defaultColor" nz-form-item-required>系统内置颜色</label>
            </div>
            <div nz-form-control nz-col [nzSm]="14" [nzXs]="24">
                    <nz-input name="defaultColor" [(ngModel)]="color.defaultColor"></nz-input>
            </div>
        </div>
      -->

      <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                <label for="name" nz-form-item-required>类别名称</label>
            </div>
            <div nz-form-control nz-col [nzSm]="14" [nzXs]="24">
                <nz-input name="name" [(ngModel)]="color.name" required maxlength="64">
                </nz-input>
            </div>
        </div>

      <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                <label for="value" nz-form-item-required>类别范围</label>
            </div>
            <div nz-form-control nz-col [nzSm]="14" [nzXs]="24">
                <nz-slider name="value" [nzMarks]="marks" [nzMin]="1" [nzMax]="6" [(ngModel)]="selectValues" nzIncluded nzRange [nzDefaultValue]="[1, 1]"></nz-slider>
            </div>
        </div>

        <div nz-form-item nz-row>
                <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                    <label for="value" nz-form-item-required>自定义颜色</label>
                </div>
                
                <div nz-form-control nz-col [nzSm]="14" [nzXs]="24">
                        <nz-input [(ngModel)]="color.customColor" name="customColor" [(colorPicker)]="color.customColor"></nz-input>
                </div>
                
                <div nz-form-control nz-col [nzSm]="4" [nzXs]="24">
                        <nz-tag [nzColor]="color.customColor"></nz-tag>
                </div>
            </div>

    

    <div class="modal-footer">
        <button nz-button type="button" [nzType]="'default'" [nzSize]="'large'" (click)="close()">
            {{l("Cancel")}}
        </button>
        <button nz-button [nzType]="'primary'" [nzSize]="'large'">
            <span>{{l("Save")}}</span>
        </button>
    </div>
</form>
